<template>
<div class="index">

    <!-- <div class="container"> -->
    <van-form @submit="onSubmit" class="form" :show-error-message="false" ref="vanFormRef">
        <div class="height-120 width-120 logo">
            <img src="@/assets/image/logo2.png" alt="">
        </div>
        <template v-if="mode === 'pass'">
            <van-field
                v-model="username"
                name="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
        </template>
        <div v-else>
            <van-field
                v-model="phone"
                name="phone"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请输入手机号' }]"
            />
            <van-field
                class="code-input"
                v-model="code"
                name="验证码"
                placeholder="验证码"
                :rules="[{ required: true, message: '请输入验证码' }]"
            >
               <template #button>
                    <van-button native-type="button" size="small" type="primary" :disabled="time !== 0" @click="sendCode">
                        {{ time !== 0 ? `${time}秒后重新发送` : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>
        </div>
        <div style="margin: 16px;">
            <van-button round block type="danger" native-type="submit">登录</van-button>
        </div>

        <div class="link-box">
            <RouterLink to="/register">注册账号</RouterLink>
            <a href="javascript:;" @click="mode = 'code'" v-show="mode === 'pass'">短信验证登录</a>
            <a href="javascript:;" @click="mode = 'pass'" v-show="mode === 'code'">密码登录</a>
            <RouterLink to="/reset">忘记密码</RouterLink>
        </div>

        <!-- <van-divider style="margin-top: 20px; color: #666;">其他方式登入</van-divider>

        <div class="weixin">
            <svg-icon iconClass="weixin" className="weixin-icon" />
        </div> -->
    </van-form>
    <!-- </div> -->

</div>
</template>

<script>
export default {
    data () {
        return {
            username: '',
            password: '',
            phone: '',
            code: '',
            mode: 'code', // pass
            time: 0
        }
    },
    methods: {
        onSubmit(values) {
            // console.log('submit', values);
            if (this.mode === 'code') { // 验证码登入
                this.$user.login({ phone: this.phone, verify: this.code }).then(reslut => {
                    // console.log(reslut)
                    setTimeout(() => {
                        this.$toast.success('登入成功')
                    }, 500)
                    this.$store.commit('user/setUser', reslut.data)
                    const redirectUrl = this.$router.currentRoute.query.redirectUrl
                    this.$router.push(redirectUrl || '/')
                })
            } else { // 账号登入
                this.$user.login({ phone: this.username, password: this.password }).then(reslut => {
                    // console.log(reslut)
                    setTimeout(() => {
                        this.$toast.success('登入成功')
                    }, 500)
                    this.$store.commit('user/setUser', reslut.data)
                    const redirectUrl = this.$router.currentRoute.query.redirectUrl
                    this.$router.push(redirectUrl || '/')
                })
            }
        },
        async sendCode () {
            try {
                if (this.time !== 0) return
                await this.$refs.vanFormRef.validate('phone')
                this.$user.getSendSms(this.phone, '2')
                setTimeout(() => {
                    this.$toast.success('验证码已发送')
                })
                this.time = 60
                let time = setInterval(() => {
                    this.time --
                    if (this.time <= 0) {
                        clearInterval(time)
                        this.time = 0
                    }
                }, 1000)
            } catch (err) {
                console.log(err)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.index {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form {
    width: 100%;
    .logo {
        width: 120px;
        height: 120px;
        margin: 0 auto 20px;
        border-radius: 50%;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 6%);
        line-height: 120px;
        padding: 0 10px;
        img {
            object-fit: contain;
        }
    }
    .link-box {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        a {
            color: #999;
            font-size: 14px;
        }
    }
    .weixin {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        background-color: #00c800;
        color: #fff;
        font-size: 24px;
        margin: 20px auto 0;
    }
}
.van-cell::after {
    border-color: #ea251c 
}

.code-input {
    /deep/ .van-cell__value {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(234, 37, 28, 40%);
    }
}
</style>
